<template>
  <div class="all">
      <header>
          <div @click="funq()">
              <van-icon name="arrow-left" />
          </div> 
          
          <div><p>邀请好友</p> </div>        
      </header>
      <div class="imga">
          <img src="/myimg/chat.png" alt="">
      </div>
      <div>
          <div class="chat">
               <van-cell  title="分享微信好友" @click="showShare = true" />
         </div>
          
          <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect"/>
      </div>
      <div class="one">
          <div class="move">
              <span>______</span>
              <span>参与步骤</span>
              <span>______</span>
          </div>
          <div class="move_b">
              <img src="/myimg/move.png" alt="">
          </div>

      </div>
      <div class="two">
          <div class="move">
              <span>______</span>
              <span>我的成就</span>
            <span>______</span>
          </div>
          <div class="middle">
              <span>已成功邀请</span>
              <span>已获得奖励</span>
          </div>
          <div class="bot">
              <span>0</span>
              <span>人</span>
              <span>0</span>
              <span>人</span>
          </div>

      </div>
      <div class="three">
          <div class="move">
              <span>______</span>
              <span>邀请记录</span>
            <span>______</span>
          </div>
          <p>暂无记录，快去邀请好友获得奖励吧~</p>

      </div>

  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
    methods: {
        funq(){
            this.$router.go(-1)
        },
        onSelect(option) {
      Toast(option.name)
      this.showShare = false
    }
    },
     data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    }
  }

}
</script>

<style scoped>
.all{
    width: 3.75rem;
    background-color: #ffffff;
}
header{
    width: 3.75rem;
    height: 0.7rem;
    border: 1px solid gray;
    display: flex;

}
header div:nth-child(1){
    width: 5%;
    line-height: 0.7rem;
    font-size: 0.2rem;
}
header div:nth-child(2){
    width: 95%;
}
header p{
    width: 100%;
    line-height: 0.7rem;
    font-size: 0.2rem;
    text-align: center;
}
.imga{
    width: 3.75rem;
    height: 4.29rem;
    margin: auto;
}
.imga img{
    width: 3.75rem;
    height: 4.29rem;
}
.one,.two,.three{
    width: 3.5rem;
    height: 1.42rem;
    border: 1px solid rgb(187, 184, 184);
    margin: auto;
    margin-top: 0.1rem;
}
.move_b{
    width:3.5rem ;
    height: 1.3rem;
    margin: auto;
}
.move_b img{
    width: 3.2rem;
    height: 0.9rem;
    margin: auto;
}
.move{
    width: 3.5rem;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
}
.middle{
    width: 3.5rem;
    height: 0.4rem;
    margin: auto;
}
.middle span{
    display: inline-block;
    width: 50%;
    line-height: 0.4rem;
    text-align: center;
}
.bot{
    width: 3.5rem;
    height: 0.6rem;
    margin: auto;
}
.bot span:nth-child(1),.bot span:nth-child(3){
    display: inline-block;
    width: 25%;
    text-align: right;
    color: red;
    font-weight: 600;
    font-size: 0.3rem;

}
.bot span:nth-child(2),.bot span:nth-child(4){
    display: inline-block;
    width: 25%;
    color: red;
    font-weight: 400;
    font-size: 0.18rem;
}
.three p{
    width: 3.5rem;
    height: 0.87rem;
    line-height:0.87rem ;
    text-align: center;
}
.chat{
    width:3.5rem ;
    height:0.6rem ;
    display: flex;
    justify-content: center;
}
.van-cell__title{
    width:0.5rem ;
    height:0.4rem ;
    line-height: 0.4rem;
    border-radius: 0.2rem;
    background-color: #03cd67;
    color: white;
    margin: auto;
    text-align: center;

} 

</style>